<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-for循环</title>
  <script src="/web1/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- v-for 实现页面列表的循环渲染 item in items ,items 是源数据数组, item 是元素的别名 -->
    <!-- v-for 循环数组进行渲染 -->
    <!-- 无下标的循环 -->
    <ul>
    <li v-for="Number in Numbers">{{Number}}</li>
    </ul>
    <!--有下标的循环  -->
    <ul>
        <li v-for="(Number,index) in Numbers">{{index+1}}+{{Number}}</li>
    </ul>

    <!-- v-for的对象 -->
    <ul>
        <li v-for="(value,key,index) in Person">{{index+1}}+{{key}}+{{value}}</li>
    </ul>

    <!-- 循环嵌套 多维解构 v-for循环嵌套-->
    <ul v-for="item in persons">
      <li v-for="(value,key) in item">{{key}}+{{value}}</li>
    </ul>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world',
        Numbers:["西游记","三国演义","红楼梦","水浒传"],
        Person:{
            name:'shane',
            age:12,
            gender:'male'
        },
        persons:[{
            name:'shane',
            age:12,
            gender:'male'
          },
          {
            name:'tom',
            age:17,
            gender:'male'
          },{
            name:'kitty',
            age:15,
            gender:'female'
          }]
      }
    })
  </script>
</body>
</html>